<template>
  <div class="number-key-board" v-show="show" ref="numberKeyBoard">
    <div class="number-key-board-title" v-if="showTitRight">
      <div class="number-key-board-title-left">{{ title }}</div>
      <div
        class="number-key-board-title-right"
        v-if="showTitRight"
        @click.stop.prevent="titleRightBtnClick"
      >
        完成
      </div>
    </div>
    <div class="number-key-board-box">
      <div
        class="number-key-board-cels"
        :style="computedCelsStyle(index)"
        v-for="(celItem, index) in realData.cols"
        :key="'cels_' + index"
      >
        <div
          class="number-key-board-row"
          v-for="(rowItem, rowindex) in celItem"
          :key="'row_' + rowindex"
        >
          <div
            :class="['number-key-board-cel', cel.iconName ? cel.iconName : '']"
            v-for="(cel, celndex) in rowItem"
            :key="'cel_' + celndex"
            @click="clickHandler(cel)"
          >
            {{ showTxt(cel) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BaseMixins from "../../mixins/index";
import { setCurrKeyBoard, getActiveInput } from "@devass/js/blur.js";
export default {
  name: "numberKeyBoard",
  inheritAttrs: false,
  mixins: [BaseMixins],
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    show: {
      type: [Boolean, Number],
      default: false,
    },
    //将 theme 属性设置为 custom 来展示键盘的右侧栏，常用于输入金额的场景。
    theme: null,
    extraKey: {
      type: [String, Number, Array, undefined],
      default: () => ".",
    },
    closeButtonText: {
      type: [String, Number],
      default: () => "完成",
    },
    title: {
      type: [String, undefined, Number],
      default: () => undefined,
    },
    value: [String, Number, undefined],
    maxLength: {
      type: Number,
      default: () => -1,
    },
    randomKeyOrder: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      list: ["default"],
      defaultData: {
        cols: [
          [
            [
              {
                title: "1",
                type: "input",
              },
              {
                title: "2",
                type: "input",
              },
              {
                title: "3",
                type: "input",
              },
            ],
            [
              {
                title: "4",
                type: "input",
              },
              {
                title: "5",
                type: "input",
              },
              {
                title: "6",
                type: "input",
              },
            ],
            [
              {
                title: "7",
                type: "input",
              },
              {
                title: "8",
                type: "input",
              },
              {
                title: "9",
                type: "input",
              },
            ],
            [
              {
                title: "",
                type: "close",
                iconName: "icon  iconfont icon-keyboardclose",
              },
              {
                title: "0",
                type: "input",
              },
              {
                title: "",
                iconName: "icon  iconfont icon-delete",
                type: "delete",
              },
            ],
          ],
        ],
      },

      extraData: {
        cols: [
          [
            [
              {
                title: "1",
                type: "input",
              },
              {
                title: "2",
                type: "input",
              },
              {
                title: "3",
                type: "input",
              },
            ],
            [
              {
                title: "4",
                type: "input",
              },
              {
                title: "5",
                type: "input",
              },
              {
                title: "6",
                type: "input",
              },
            ],
            [
              {
                title: "7",
                type: "input",
              },
              {
                title: "8",
                type: "input",
              },
              {
                title: "9",
                type: "input",
              },
            ],
            [
              {
                title: "0",
                type: "input",
              },
              {
                title: "",
                isExtraKey: true,
                type: "input",
              },
            ],
          ],
          [
            [
              {
                title: "",
                iconName: "icon  iconfont icon-delete",
                type: "delete",
              },
            ],
            [
              {
                title: "完成",
                iconName: "",
                iconName: "number-key-board-btn-submit",
                isCloseButton: true,
                type: "submit",
              },
            ],
          ],
        ],
      },
      idCardData: {
        cols: [
          [
            [
              {
                title: "1",
                type: "input",
              },
              {
                title: "2",
                type: "input",
              },
              {
                title: "3",
                type: "input",
              },
            ],
            [
              {
                title: "4",
                type: "input",
              },
              {
                title: "5",
                type: "input",
              },
              {
                title: "6",
                type: "input",
              },
            ],
            [
              {
                title: "7",
                type: "input",
              },
              {
                title: "8",
                type: "input",
              },
              {
                title: "9",
                type: "input",
              },
            ],
            [
              {
                title: "X",
                type: "input",
              },
              {
                title: "0",
                type: "input",
              },
              {
                title: "",
                iconName: "icon  iconfont icon-delete",
                type: "delete",
              },
            ],
          ],
        ],
      },
      randomData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    };
  },
  computed: {
    realData() {
      if (this.theme && this.extraKey !== "X") {
        if (Array.isArray(this.extraKey) && this.extraKey.length == 2) {
          let tmpArr = { ...this.extraData };
          tmpArr.cols[0][3] = [
            {
              title: this.extraKey[0],
              type: "input",
            },
            {
              title: "0",
              type: "input",
            },
            {
              title: this.extraKey[1],
              type: "input",
            },
          ];
          return tmpArr;
        } else {
          let tmpArr = { ...this.extraData };
          tmpArr.cols[0][3] = [
            {
              title: "0",
              type: "input",
            },
            {
              title: this.extraKey,
              type: "input",
            },
          ];
          return tmpArr;
        }
      } else if (!this.theme && this.extraKey === "X") {
        return this.idCardData;
      } else if (
        this.$attrs.hasOwnProperty("random-key-order") ||
        this.randomKeyOrder
      ) {
        var tmp = { ...this.defaultData };
        let randomArr = this.randomData;
        return {
          cols: [
            [
              [
                {
                  title: randomArr[0],
                  type: "input",
                },
                {
                  title: randomArr[1],
                  type: "input",
                },
                {
                  title: randomArr[2],
                  type: "input",
                },
              ],
              [
                {
                  title: randomArr[3],
                  type: "input",
                },
                {
                  title: randomArr[4],
                  type: "input",
                },
                {
                  title: randomArr[5],
                  type: "input",
                },
              ],
              [
                {
                  title: randomArr[6],
                  type: "input",
                },
                {
                  title: randomArr[7],
                  type: "input",
                },
                {
                  title: randomArr[8],
                  type: "input",
                },
              ],
              [
                {
                  title: "",
                  type: "close",
                  iconName: "icon  iconfont icon-keyboardclose",
                },
                {
                  title: randomArr[9],
                  type: "input",
                },
                {
                  title: "",
                  iconName: "icon  iconfont icon-delete",
                  type: "delete",
                },
              ],
            ],
          ],
        };
      } else {
        return this.defaultData;
      }
    },
    showTitRight() {
      return (!this.theme && this.extraKey === "X") || this.title;
    },
  },
  watch: {
    show: {
      handler(bool) {
        this.$nextTick(() => {
          this.$emit("show", bool);
        });
      },
      immediate: true,
    },
  },
  created() {
    this.randomData = this.random();
  },
  methods: {
    random() {
      var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      var randomNumber = function () {
        return 0.5 - Math.random();
      };
      return arr.sort(randomNumber);
    },
    computedCelsStyle(index) {
      if (this.theme === "custom") {
        if (index == 0) {
          return { flex: 5 };
        } else {
          return { flex: 2 };
        }
      } else {
        return {};
      }
    },
    showTxt(item) {
      if (item.isExtraKey && !Array.isArray(this.extraKey)) {
        return this.extraKey;
      } else if (item.isCloseButton) {
        return this.closeButtonText;
      } else {
        return item.title;
      }
    },
    clickHandler(item) {
      if (item.type == "input") {
        this.$emit("append", item.title);
      } else if (item.type == "delete") {
        this.$emit("delete");
      } else if (item.type === "close") {
        this.$emit("show", false);
      } else if (item.type === "submit") {
        this.$emit("submit");
        this.$emit("show", false);
      }
    },
    titleRightBtnClick() {
      this.$emit("show", false);
      this.$emit("blur", "title-btn");
    },
    // //所有子组件键盘都要实现
    // triggerShow(bool) {
    //   this.$emit("show", bool);
    // },
    focusHandler() {
      setCurrKeyBoard({
        dom: this.$refs["numberKeyBoard"],
        vm: this,
      });
    },
  },
};
</script>
<style lang="scss">
@import "@/var.scss";
.number-key-board {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40%;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 5px 5px 20px;
  background: $bgColor;
  box-sizing: border-box;
  touch-action: none;
  user-select: none;
  .number-key-board-box {
    flex: 1;
    display: flex;
  }
  .number-key-board-cels {
    display: flex;
    flex: 1;
    flex-direction: column;
    & + .number-key-board-cels {
      padding-left: 10px;
    }
  }
  .number-key-board-row {
    flex: 1;
    display: flex;
    & + .number-key-board-row {
      margin-top: 10px;
    }
  }
  .number-key-board-cel {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $btnBgColor;
    text-align: center;
    border-radius: 10px;
    font-size: 28px;
    color: $btnTxtColor;
    font-weight: bold;
    &.icon {
      font-size: 34px;
      font-weight: normal;
    }
    & + .number-key-board-cel {
      margin-left: 10px;
    }
  }
  .number-key-board-btn-submit {
    background: $submitBgColor;
    color: $btnSubmitColor;
  }
  .number-key-board-title {
    line-height: 40px;
    height: 40px;
    padding: 0 5px;
    display: flex;
    .number-key-board-title-left {
      flex: 1;
      text-align: center;
      line-height: 30px;
      color: #646566;
      font-size: 16px;
    }
    .number-key-board-title-right {
      width: 40px;
      color: #576b95;
    }
  }
}
</style>